<template>
  <view class="cart-page">
    <view class="cart-header">
      <view class="back-btn" @click="goBack">←</view>
      <text class="page-title">购物车</text>
      <text class="edit-btn" @click="toggleEdit">{{ isEditing ? '完成' : '编辑' }}</text>
    </view>
    
    <view class="cart-content" v-if="cartItems.length > 0">
      <view class="cart-list">
        <view 
          v-for="item in cartItems" 
          :key="item.id"
          class="cart-item"
        >
          <view class="item-checkbox" @click="toggleSelect(item.id)">
            <text class="checkbox" :class="{ checked: item.selected }">✓</text>
          </view>
          <image class="item-image" :src="item.image" mode="aspectFill" />
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-type">{{ item.type === 'course' ? '课程' : '商品' }}</text>
            <view class="item-price">
              <text class="price">¥{{ item.price }}</text>
              <view class="quantity-control" v-if="!isEditing">
                <view class="quantity-btn" @click="decreaseQuantity(item.id)">-</view>
                <text class="quantity">{{ item.quantity }}</text>
                <view class="quantity-btn" @click="increaseQuantity(item.id)">+</view>
              </view>
              <view class="delete-btn" v-if="isEditing" @click="removeItem(item.id)">
                删除
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="cart-footer">
        <view class="select-all">
          <view class="select-checkbox" @click="toggleSelectAll">
            <text class="checkbox" :class="{ checked: isAllSelected }">✓</text>
          </view>
          <text class="select-text">全选</text>
        </view>
        <view class="total-info">
          <text class="total-text">合计：</text>
          <text class="total-price">¥{{ totalPrice }}</text>
        </view>
        <view class="checkout-btn" @click="checkout">
          结算({{ selectedCount }})
        </view>
      </view>
    </view>
    
    <view class="empty-cart" v-else>
      <text class="empty-icon">🛒</text>
      <text class="empty-text">购物车是空的</text>
      <view class="go-shopping" @click="goShopping">去逛逛</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const isEditing = ref(false)

// 假数据
const cartItems = ref([
  {
    id: 1,
    type: 'course',
    name: 'Vue3 + TypeScript 实战课程',
    price: 299,
    image: 'https://via.placeholder.com/150x150/ff6b35/ffffff?text=Vue3',
    quantity: 1,
    selected: true
  },
  {
    id: 2,
    type: 'product',
    name: 'iPhone 15 Pro Max',
    price: 9999,
    image: 'https://via.placeholder.com/150x150/ff6b35/ffffff?text=iPhone',
    quantity: 1,
    selected: false
  },
  {
    id: 3,
    type: 'product',
    name: '时尚休闲T恤',
    price: 89,
    image: 'https://via.placeholder.com/150x150/ff6b35/ffffff?text=T恤',
    quantity: 2,
    selected: true
  }
])

const isAllSelected = computed(() => {
  return cartItems.value.length > 0 && cartItems.value.every(item => item.selected)
})

const selectedCount = computed(() => {
  return cartItems.value.filter(item => item.selected).reduce((total, item) => total + item.quantity, 0)
})

const totalPrice = computed(() => {
  return cartItems.value
    .filter(item => item.selected)
    .reduce((total, item) => total + (item.price * item.quantity), 0)
})

const goBack = () => {
  uni.navigateBack()
}

const toggleEdit = () => {
  isEditing.value = !isEditing.value
}

const toggleSelect = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item) {
    item.selected = !item.selected
  }
}

const toggleSelectAll = () => {
  const allSelected = isAllSelected.value
  cartItems.value.forEach(item => {
    item.selected = !allSelected
  })
}

const increaseQuantity = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item) {
    item.quantity += 1
  }
}

const decreaseQuantity = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item && item.quantity > 1) {
    item.quantity -= 1
  }
}

const removeItem = (itemId) => {
  const index = cartItems.value.findIndex(item => item.id === itemId)
  if (index > -1) {
    cartItems.value.splice(index, 1)
  }
}

const checkout = () => {
  if (selectedCount.value === 0) {
    uni.showToast({ title: '请选择商品', icon: 'none' })
    return
  }
  uni.showToast({ title: '跳转到结算页面', icon: 'none' })
}

const goShopping = () => {
  // 跳转到商城页面
  uni.showToast({ title: '去逛逛', icon: 'none' })
}
</script>

<style scoped>
.cart-page {
  background: #f5f5f5;
  min-height: 100vh;
}
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 30rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.back-btn {
  font-size: 32rpx;
  color: #333;
  padding: 10rpx;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.edit-btn {
  font-size: 28rpx;
  color: #ff6b35;
}
.cart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cart-list {
  flex: 1;
  padding: 20rpx;
}
.cart-item {
  display: flex;
  background: #fff;
  padding: 25rpx;
  margin-bottom: 15rpx;
  border-radius: 15rpx;
}
.item-checkbox {
  margin-right: 20rpx;
  padding: 10rpx;
}
.checkbox {
  width: 36rpx;
  height: 36rpx;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: transparent;
}
.checkbox.checked {
  background: #ff6b35;
  border-color: #ff6b35;
  color: #fff;
}
.item-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 10rpx;
}
.item-type {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 15rpx;
}
.item-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 32rpx;
  color: #ff6b35;
  font-weight: bold;
}
.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 25rpx;
  overflow: hidden;
}
.quantity-btn {
  width: 60rpx;
  height: 50rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}
.quantity {
  width: 80rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  background: #fff;
}
.delete-btn {
  background: #ff4757;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
.cart-footer {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 25rpx 30rpx;
  border-top: 1px solid #f0f0f0;
}
.select-all {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}
.select-checkbox {
  margin-right: 15rpx;
}
.select-text {
  font-size: 26rpx;
  color: #333;
}
.total-info {
  flex: 1;
  text-align: right;
}
.total-text {
  font-size: 26rpx;
  color: #666;
}
.total-price {
  font-size: 36rpx;
  color: #ff6b35;
  font-weight: bold;
}
.checkout-btn {
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: #fff;
  padding: 25rpx 40rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-left: 25rpx;
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 50rpx;
}
.empty-icon {
  font-size: 120rpx;
  margin-bottom: 40rpx;
  opacity: 0.5;
}
.empty-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 60rpx;
}
.go-shopping {
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: #fff;
  padding: 25rpx 60rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
}
</style>
